<%--
  Created by IntelliJ IDEA.
  User: Colorful
  Date: 2023/8/14
  Time: 8:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath }"/>

<html>
<head>
    <title>选座 - 猫眼电影 - 一网打尽好电影</title>
    <link rel="stylesheet" href="${path}/css/chooseSeat.css" type="text/css">
    <script type="text/javascript" rel="script" src="${path}/js/jquery-3.6.4.js"></script>
</head>
<body>
<%@include file="header.jsp"%>
<div class="container">
    <div class="work">
        <div class="order-progress-bar">
            <div class="step first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step done">
                <span class="step-num">2</span>
                <div class="bar"></div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="step ">
                <span class="step-num">3</span>
                <div class="bar"></div>
                <span class="step-text">14分钟内付款</span>
            </div>
            <div class="step last ">
                <span class="step-num">4</span>
                <div class="bar"></div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>
        <div class="main clearfix">
            <div class="hall">
                <div class="seat-example">
                    <div class="selectable-example example">
                        <span>可选座位</span>
                    </div>
                    <div class="sold-example example">
                        <span>已售座位</span>
                    </div>
                    <div class="selected-example example">
                        <span>已选座位</span>
                    </div>
                    <div class="couple-example example">
                        <span>情侣座位</span>
                    </div>
                </div>
                <div class="seats-block">
<%--                    座位左侧排序号--%>
                    <div class="row-id-container">
                        <span class="row-id">1</span>
                        <span class="row-id">2</span>
                        <span class="row-id">3</span>
                        <span class="row-id">4</span>
                        <span class="row-id">5</span>
                        <span class="row-id">6</span>
                        <span class="row-id">7</span>
                        <span class="row-id">8</span>
                    </div>
                    <div class="seats-container">
                        <div class="screen-container">
                            <div class="screen">银屏中央</div>
                            <div class="c-screen-line"></div>
                        </div>
                        <div class="seats-wrapper">
<%--                            座位部分展示--%>
                            <c:set var="seatList" value="${requestScope.seatList}"/>
                            <c:choose>
                                <c:when test="${empty seatList}">
                                    <c:set var="aud_id" value="${sessionScope.aud_id}"/>
                                    <script>
                                        window.location='${path}/SeatServlet?prom=chooceSeat&aud_Id=${aud_id}';
                                    </script>
                                </c:when>
                                <c:otherwise>
                            <div class="row">
                                    <c:forEach var="sl" items="${seatList}" varStatus="status">
                                            <c:if test="${sl.seat_status==1}">
                                                <span class="seat sold"></span>
                                            </c:if>
                                            <c:if test="${sl.seat_status==0}">
                                                <span class="seat selectable" onclick="changeSeat(this,${sl.seat_row},${sl.seat_colmun},${sl.seat_id})"></span>
                                            </c:if>
                                            <c:if test="${status.count%12==0}">
                                                <br/>
                                                <div class="row"></div>
                                            </c:if>
                                    </c:forEach>
                            </div>
                                </c:otherwise>
                            </c:choose>
                        </div>
                    </div>
                </div>
            </div>
<%--            电影部分展示--%>
            <div class="side">
                <div class="movie-info clearfix">
                    <c:set var="movie" value="${sessionScope.movie}"/>
                    <c:choose>
                        <c:when test="${empty movie}">
                            <c:set var="movie_id" value="${sessionScope.movie_id}"/>
                            <script>
                                window.location='${path}/MovieHomeServlet?prom=seatMovie&movieId=${movie_id}';
                            </script>
                        </c:when>
                        <c:otherwise>
                            <div class="poster">
                                <img height="158px" width="115px" src="${path}/images/moviePicture/${movie.movie_picture}">
                            </div>
                            <div class="content">
                                <p class="name text-ellipsis">${movie.movie_cn_name}</p>
                                <div class="info-item">
                                    <span>类型 :</span>
                                    <span class="value">${movie.movie_type}</span>
                                </div>
                                <div class="info-item">
                                    <span>时长 :</span>
                                    <span class="value">${movie.movie_duration}</span>
                                </div>
                            </div>
                        </c:otherwise>
                    </c:choose>
                </div>
                <br>
<%--                影院部分展示--%>
                <c:set var="auditorium" value="${sessionScope.auditorium}"/>
                <c:choose>
                    <c:when test="${empty auditorium}">
                        <script>
                            window.location='${path}/AuditoriumServlet?prom=seatAud&audId=${aud_id}&movId=${movie_id}';
                        </script>
                    </c:when>
                    <c:otherwise>
                        <div class="show-info">
                            <div class="info-item">
                                <span>影院  :</span>
                                <span class="value text-ellipsis">${auditorium.cinema_name}</span>
                            </div>
                            <div class="info-item">
                                <span>影厅  :</span>
                                <span class="value text-ellipsis">${auditorium.aud_name}</span>
                            </div>
                            <div class="info-item">
                                <span>版本   :</span>
                                <span class="value text-ellipsis">${auditorium.aud_lang}</span>
                            </div>
                            <div class="info-item">
                                <span>场次  :</span>
                                <span class="value text-ellipsis">${auditorium.aud_time}</span>
                            </div>
                            <div class="info-item">
                                <span>票价  :</span>
                                <span class="value text-ellipsis">￥${auditorium.aud_money}/张</span>
                            </div>
                        </div>
                    </c:otherwise>
                </c:choose>
                <div class="ticket-info">
                    <div class="no-ticket" style="display: block;">
                        <p class="buy-limit" >座位：一次最多选6个座位</p>
                        <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                    </div>
                    <div class="has-ticket" style="display: none;">
                        <span class="text">座位：</span>
                        <div class="ticket-container">

                        </div>
                    </div>
                    <div class="total-price">
                        <span>总价 :</span>
                        <span class="price">￥0</span>
                    </div>
                </div>
                <div class="confirm-order">
                    <div class="cellphone">
                        <span>手机号 : </span>
                        <span class="phone-num">${sessionScope.user.phone}</span>
                    </div>
                    <div class="confirm-btn disable" onclick="orderAdd()">确认选座</div>
<%--                    --%>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="footer.jsp"%>
<script>
    //计算价格的方法
    var total_bill = 0 ;//总价
    var pricePerTicked = ${auditorium.aud_money};//单价
    function showTotalbill() {
        total_bill = document.querySelectorAll(".selected").length * pricePerTicked;
        document.querySelector('.price').innerHTML = "￥"+total_bill;
    }
    // 点击选择座位&&价格变化&&座位变化
    function changeSeat(a,b,c,d) {
        let className=$(a).attr("class");
        if($(".selected").length<6){
            if(className=='seat selectable'){
                $(a).attr("class","seat selected");
                $(".disable").attr("class","confirm-btn");
                $(".no-ticket").attr("style","display: none");
                $(".has-ticket").attr("style","display: block");
                var span=$("<span class='ticket'  id="+d+"></span>");
                span.html(b+"排"+c+"座");
                $(".ticket-container").append(span);
            }else if(className=='seat selected') {
                if($(".selected").length==1){
                    $(".no-ticket").attr("style","display: block");
                    $(".has-ticket").attr("style","display: none");
                    $(".confirm-btn").attr("class","confirm-btn disable");
                }
                $(a).attr("class","seat selectable");
                $("#"+d).remove();
            }
            showTotalbill();
        }else {
            if (className=='seat selected'){
                if($(".selected").length==1){
                    $(".no-ticket").attr("style","display: block");
                    $(".has-ticket").attr("style","display: none");
                }
                $(a).attr("class","seat selectable");
                $("#"+d).remove();
                showTotalbill();
            }else {
                alert("一次最多购买6张票");
            }
        }
    }
    function orderAdd() {
        var user_id=${sessionScope.user.user_id};                  //用户id
        var movie_id="${movie.movie_id}";   //电影id
        var cinema_id="${auditorium.cinema_id}";    //影院id
        var audId="${auditorium.aud_id}"            //影厅id

       var movieName="${movie.movie_cn_name}";      //电影名称
       var cinName="${auditorium.cinema_name}";     //影院名称

       var audTime="${auditorium.aud_time}";        //影厅电影开始时间
       var audName="${auditorium.aud_name}";        //影厅名称

        var list=$(".ticket");
        var seatId="";                  //获取座位id数组
        var seat="";                    //获取座位数组
        for (var i=0;i<list.length;i++){
            seatId+=$(list[i]).attr("id")+",";
        }
        for (var i=0;i<list.length;i++){
            seat+=$(list[i]).html()+" ";
        }
        price=total_bill;//         获取总价
        window.location="${path}/OrderUserServlet?prom=overOrder&movieName="+movieName+ "&audName="+audName+"&cinName="
            +cinName+"&seatId="+seatId+"&seat="+seat+"&price="+price+"&audTime="+audTime+"&user_id="+user_id+"&movie_id="+movie_id+"&cinema_id="+cinema_id+"&audId="+audId;
    }
</script>
</body>
</html>
